<template>
   <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="s米糕">
          查询搜索
        </el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="s米糕">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="s米糕" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input type="number" v-model="listQuery.orderSnId" class="input-width" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="购买者：">
            <el-input v-model="listQuery.userName" placeholder="收货人姓名/手机号码"></el-input>
          </el-form-item>
          <el-form-item label="提交时间：">
            <el-date-picker class="input-width" v-model="listQuery.createTime" value-format="yyyy-MM-dd" type="date"
              placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单状态：">
            <el-select v-model="listQuery.orderStatus" class="input-width" placeholder="全部" clearable>
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="订单来源：">
            <el-select v-model="listQuery.platform" class="input-width" placeholder="全部" clearable>
              <el-option v-for="item in sourceTypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="orderTable" :data="list" style="width: 100%;" @selection-change="handleSelectionChange"
        v-loading="listLoading"  border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="80" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="订单编号" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.orderSnId }}</template>
        </el-table-column>
        <el-table-column label="提交时间" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.createTime | formatCreateTime }}</template>
        </el-table-column>
        <el-table-column label="用户账号" align="center">
          <template slot-scope="scope">{{ scope.row.userName }}</template>
        </el-table-column>
        <el-table-column label="订单金额" align="center">
          <template slot-scope="scope">{{ scope.row.money }}</template>
        </el-table-column>

        <el-table-column label="钱包地址" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.walletAddress }}</template>
        </el-table-column>
        <el-table-column label="支付方式" align="center">
          <template slot-scope="scope">{{ scope.row.payType | formatPayType }}</template>
        </el-table-column>
        <el-table-column label="订单来源"  align="center">
          <template slot-scope="scope">{{ scope.row.platform | formatSourceType }}</template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">{{ (scope.row.status)| formatStatus}}</template>
        </el-table-column>
        <el-table-column label="提现状态" align="center">
          <template slot-scope="scope">{{ castingStatus[scope.row.alreadyCasting]}}</template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" 
              :disabled="scope.row.status == 0 || (scope.row.alreadyCasting == 1 && scope.row.status == 1)"  
              @click="handleByWithdrawalAgain(scope.$index, scope.row)">
              再次提现
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="batch-operate-container">
      <el-select size="s米糕" v-model="operateType" placeholder="批量操作">
        <el-option v-for="item in operateOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button style="margin-left: 20px" class="search-button" @click="handleBatchOperate()" type="primary"
        size="s米糕">
        确定
      </el-button>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum" :page-size="listQuery.pageSize"
        :page-sizes="[15]" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>

import {getList, getListBySearch, withdrawalAgin} from "../../../api/withdrawal"
import { OrderData } from "../../../data/ControllerData";
import OrderFilter from "../../../filter/order"
import {searchByOrder} from "../../../param/search"

export default{
  name: "withdrawal",
  data() {
    return {
      list: [],
      listLoading: false,
      operateType: undefined,
      pageSize:15,
      listQuery: { ...searchByOrder },
      ...OrderData
    };
  },

  filters:OrderFilter,

  methods: {

    handleByWithdrawalAgain(index, item) {
      withdrawalAgin({id: item.id}, this, index);
    },
    getListBySearch() {
      getListBySearch(this.listQuery, this);
    },

    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      getListBySearch(this.listQuery, this);
    },

    handleSelectionChange(val, index) {

    },
    handleResetSearch(){
      console.log(searchByOrder);
      this.listQuery = {...searchByOrder};
      getList(this.listQuery, this);
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = val;
      getListBySearch(this.listQuery, this);
    },
    handleSearchList(){
      this.getListBySearch()
    }
  },

  mounted() {
    getList(this.listQuery, this);
  },
}

</script>